import Patch from './patch.mdx'
import ExternalClassesReminder from '@site/fragments/ExternalClassesReminder.mdx'

# Weapp-vite

<ExternalClassesReminder framework="weapp-vite" />

## 安装

```bash npm2yarn
npm install -D tailwindcss @tailwindcss/postcss postcss weapp-tailwindcss
```

<Patch/>

## 配置

更改 `vite.config.ts` 注册 `weapp-tailwindcss`

```js title="vite.config.ts"
import path from 'node:path'
import tailwindcss from '@tailwindcss/vite'
import { UnifiedViteWeappTailwindcssPlugin } from 'weapp-tailwindcss/vite'
import { defineConfig } from 'weapp-vite/config'

export default defineConfig({
  plugins: [
    UnifiedViteWeappTailwindcssPlugin({
      rem2rpx: true,
      cssEntries: [
        // app.css 的路径
        path.resolve(import.meta.dirname, './app.css'),
      ],
    }),
  ],
})
```

添加 `postcss.config.js` 注册 `@tailwindcss/postcss`

```js title="postcss.config.js"
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}
```


## 添加样式

在项目目录下，小程序全局的 `app.css` 中，添加以下内容：

```css title="app.css"
@import "weapp-tailwindcss";
```


更改好配置之后，直接启动即可
